<template>
  <div class="chatul">
    <ul>
      <li v-for="item in data" class="">
        <JSONText :item="item"></JSONText>
        <Collect
          v-if="['collect', 'friend'].includes(item.type)"
          :item="item"
        ></Collect>
        <History
          v-else-if="['history', 'bookmark'].includes(item.type)"
          :item="item"
        ></History>
        <Message v-else :item="item"></Message>
      </li>
    </ul>
  </div>
</template>
<script>
import Message from "@/components/ChatBox/Message.vue";
import Collect from "@/components/ChatBox/Collect.vue";
import History from "@/components/ChatBox/History.vue";
import { mapState } from "vuex";

export default {
  components: {
    Message,
    Collect,
    History,
  },
  computed: {
    ...mapState(["isDev"]),
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  name: "ChatList",
};
</script>

<style lang="scss" scoped>
.chatul {
  width: 1000px;
  ul {
    list-style-type: none;
  }
}
</style>
